<template>
  <div>
    <ListContainer title="优惠券列表"
                   resource-uri="coupon"
                   resource-name="coupon"
                   v-on:fetched="onFetched">
      <div slot="filters" style="padding-bottom: 1rem">
        <el-button @click="addCoupon" type="primary" size="mini">添加优惠券</el-button>
      </div>
      <div slot="items">
        <el-table :data="items" stripe style="width: 100%; font-size: 60%;">
          <el-table-column
            prop="id"
            label="序号" width="150">
          </el-table-column>
          <el-table-column
            prop="code"
            label="优惠券编码" width="100">
          </el-table-column>
          <el-table-column
            prop="create_time.date"
            label="生成时间" width="150">
          </el-table-column>
        </el-table>
      </div>
    </ListContainer>
  </div>
</template>

<style scoped>

</style>

<script>
  import ListContainer from '../ListContainer.vue'

  export default {
    data () {
      return {
        items: []
      }
    },
    components: {
      ListContainer
    },
    methods: {
      onFetched: function (data) {
        this.items = data
      },
      addCoupon: function () {
        let vm = this
        vm.loading = true

        this.$http.post('coupon', {
          headers: {
            Authorization: vm.$store.state.login.authorization
          }
        }).then((response) => {
          response.json().then((response) => {
            vm.loading = false
            vm.$message('已成功添加50个优惠券!')
          })
        }).catch((response) => {
          this.dealWithError(response.status)
        })
      }
    }
  }
</script>
